<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/form/control.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/form/calendar.css" />

    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj"
        href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>日历控件 Calendar</h2>
                <p>该控件本身不应单独使用，应作为子组件嵌入到父组件。当用户选择日期后，会触发 pick-date 事件，并传入 date 日期的参数，形如 2018-8-8。</p>
                <p>例子：</p>
                <pre class="prettyprint"><xmp><aj-form-calendar></aj-form-calendar></xmp></pre>
                
                <p>演示：</p>
                <div class="calendar">
                    <aj-form-calendar></aj-form-calendar>
                </div>

                <h2>日期选择器（带输入框的）</h2>
                <p>输入框本身不美化，应伴随表单样式一起定义。</p>

                <p>属性说明：</p>
                <table class="aj-table">
                    <thead>
                        <tr>
                            <th>属性</th>
                            <th>含义</th>
                            <th>类型</th>
                            <th>是否必填，默认值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>fieldName</td>
                            <td>表单 name，字段名</td>
                            <td>String</td>
                            <td>y</td>
                        </tr>
                        <tr>
                            <td>fieldValue</td>
                            <td>表单值，可选的</td>
                            <td>String</td>
                            <td>n</td>
                        </tr>
                        <tr>
                            <td>positionFixed</td>
                            <td>表是否采用固定定位，<br>有时父元素限制了溢出，所以采用固定布局则无此问题。</td>
                            <td>Boolean</td>
                            <td>n</td>
                        </tr>
                    </tbody>
                </table>

                <p>例子：</p>
                <pre
                    class="prettyprint"><xmp><aj-form-calendar-input field-name="date" field-value="2018-8-2"></aj-form-calendar-input></xmp></pre>

                <p>演示：</p>
                <div class="calendar-input">
                    <aj-form-calendar-input field-name="date" field-value="2018-8-2"></aj-form-calendar-input>
                </div>

                <h2>日期选择器（可选择时间）</h2>
                <p>日期+时间</p>

                <div class="calendar-time">
                    <aj-form-calendar :show-time="true" field-name="date" field-value="2018-8-2"></aj-form-calendar>
                </div>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
    <script src="../../dist/base/prototype.js"></script>
    <script src="../../dist/base/aj.js"></script>
    <script src="../../dist/form/calendar.js"></script>
    <script src="../../dist/form/calendar-input.js"></script>
    <script>
        new Vue({ el: '.calendar' });
        new Vue({ el: '.calendar-input' });
        new Vue({ el: '.calendar-time' });
    </script>
</body>

</html>